<template>
  <view class="tn-flex tn-flex-row-between tn-flex-col-center">
    <text
      class="title"
      :style="{ color: titleColor, borderLeftColor: barColor }"
    >
      <slot></slot>
    </text>
    <view class="extra tn-flex tn-flex-col-center">
      <slot name="extra"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "TitleBar",
  props: {
    barColor: {
      type: String,
      default: "#000000",
    },
    titleColor: {
      type: String,
      default: "#3D3D3D",
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-weight: 500;
  font-size: 32rpx;
  padding-left: 20rpx;
  border-left: 6rpx solid;
  display: flex;
  align-items: center;
  min-height: 48rpx;
}
</style>